<template>
    <!-- 主页容器 -->
    <div class="home">
        <!-- Search组件用于搜索功能，通过@search事件传递关键字 -->
        <Search @search="search"></Search>
        <!-- BookList组件用于展示产品列表 -->
        <BookList ref="bookList"></BookList>
        <!-- el-backtop组件用于返回页面顶部按钮 -->
        <el-backtop>
        </el-backtop>
    </div>
</template>

<script>
import Search from './search' // 导入Search组件
import BookList from './bookList' // 导入BookList组件

export default {
    name: 'Home', // 组件名称
    components: { // 定义组件中使用的子组件
        Search,
        BookList
    },
    methods: { // 组件的方法
        search(key) { // 定义search方法，接收从Search组件传递来的关键字
            if (key.trim()) { // 使用trim()确保关键字不为空
                this.$refs.bookList.search(key); // 使用$refs获取BookList组件实例并调用其search方法
            } else {
                // 如果关键字为空，则显示错误提示
                this.$message.error('输入不能为空！');
            }
        }
    }
}
</script>

<style scoped>
/* 定义返回顶部按钮的样式 */
.goTop {
    height: 100vh; /* 设置高度为视口的100% */
    overflow-x: hidden; /* 隐藏水平滚动条 */
}
</style>